<script setup lang="ts">
import { Vector3 } from 'three';
import { App, Marker3D } from 'vjmap3d';
import { inject, onMounted, ref } from 'vue';
const app = inject("app") as App;
const divDomList = ref(new Map<number, any>());
const setDivDom = (el: any, id: number)=>{
    if(el){
        divDomList.value.set(id, el) 
    }
}
onMounted(() => {
    // 获取已加载的资源
    let resources = app.getLoadedResources();
    let tollModel = resources.getModel("toll");
    for(let m = 0; m < 8; m++) {
        let marker = new Marker3D({
            element: divDomList.value.get(m + 1),
            width: 0.8
        })
        let obj = tollModel.getObjectByName(`CD0${m + 1}`);
        const pos = new Vector3();
        obj.getWorldPosition(pos);
        let position = pos.clone();
        position.y += 0.6;
        marker.setPosition(position);
        marker.addTo(app);
    }
})

</script>

<template>
    <div class="toll_num_tag" :ref="(el) => setDivDom(el, i)" v-for="i in 8">0{{i}}</div> 
</template>

<style scoped>
.toll_num_tag {
    color: #ffffff;
    font-size: 18px;
    padding: 4px 16px;
    padding-bottom:8px ;
    background-image: url(../assets/numtag.png);
    background-repeat: no-repeat;
    background-size:100% 100%;
}
</style>